<html>
    <head>
        <style>
            body {
                padding: 100px;
                margin: 0;
            }

            #box {
                width: 100px;
                height: 100px;
                background-color: #0077ff;
            }

            [data-layout-correct="false"] {
                background: #dd1144 !important;
                opacity: 1 !important;
            }
        </style>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/src/imports/optimized-appear.js"></script>
        <script type="module" src="/src/imports/script-assert.js"></script>

        <script type="module">
            const {
                motion,
                startOptimizedAppearAnimation,
                optimizedAppearDataAttribute,
                motionValue,
            } = window.Motion
            const { matchViewportBox } = window.Assert
            const root = document.getElementById("root")

            const delay = 0.25
            const duration = 0.5
            const x = motionValue(0)

            x.on("change", (latest) => {
                if (latest < 100) {
                    showError(
                        document.getElementById("box"),
                        `x transform should never be less than 100`
                    )
                }
            })

            // This is the tree to be rendered "server" and client-side.
            const Component = React.createElement(() => {
                React.useLayoutEffect(() => {
                    const startTime = performance.now()
                    while (performance.now() - startTime < 500) {}
                })

                return React.createElement(motion.div, {
                    id: "box",
                    initial: { x: 0, opacity: 0 },
                    animate: { x: 100, opacity: 1 },
                    transition: { delay, duration, ease: "linear" },
                    style: { x },
                    /**
                     * On animation start, check the values we expect to see here
                     */
                    onAnimationStart: () => {
                        // matchViewportBox(document.getElementById("box"), {
                        //     top: 100,
                        //     right: 250,
                        //     left: 150,
                        //     bottom: 200,
                        // })
                    },
                    [optimizedAppearDataAttribute]: "a",
                })
            })

            // Emulate server rendering of element
            root.innerHTML = ReactDOMServer.renderToString(Component)

            const options = {
                delay: delay * 1000,
                duration: duration * 1000,
                ease: "linear",
            }

            startOptimizedAppearAnimation(
                document.getElementById("box"),
                "transform",
                ["translateX(0px)", "translateX(100px)"],
                options,
                (animation) => {
                    setTimeout(() => {
                        ReactDOMClient.hydrateRoot(root, Component)
                    }, duration * 1000)
                }
            )
            startOptimizedAppearAnimation(
                document.getElementById("box"),
                "opacity",
                [0, 1],
                options
            )
        </script>
    </body>
</html>
